<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>msg:{{msg}}</p>
        <input type="text" v-model="msg">
        <hr>
        <input type="text" v-model="wd">
        <input type="button" value="查询数据" @click="loadDatas()">
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
        <hr>
        <p>user:{{user}}</p>
        <input type="text" v-model="user.name">
        <input type="button" value="重新定义user对象" @click="user = {}">
        <input type="text" v-model="user.age">
        <hr>
        <p>info:{{ info }}</p>
        <input type="text" v-model="info">
    </div>
</body>
<script>    
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"msg变量",
            wd:"html",
            list:[],
            user:{
                name:"tom",
                age:23
            },
            info:"info变量"
        },
        watch: {
            msg:function(newValue,oldValue){
                console.log("被观察的msg变量发生变化:",newValue,oldValue,this);
            },
            user:{
                handler:function(newValue,oldValue){
                    console.log("user被修改");
                    console.log(newValue,oldValue);
                },
                deep:true
            },
            "user.name":function(){
                console.log("user.name 发生变化")
            },
            // wd(newValue,oldValue){
            //     this.loadDatas()
            // },
            info:[
                function(){
                    console.log("info发生变化-fun1")
                },
                function(){
                    console.log("info发生变化-fun2")
                },
            ]
        },
        methods: {
            loadDatas(){
                $.ajax({
                    url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                    method:"get",
                    data:{
                        wd:this.wd
                    },
                    dataType:"jsonp",
                    jsonp:"cb",
                    
                }).done((data)=>{
                    this.list = data.s
                })
            }
        },
    })
    // 组件外定义，以实例对象的内置方法 $watch 进行定义
    // vm.$watch(被监控的变量名[实例对应的仓库变量]，监控方法，配置项)，存在返回值 unwatch = function(){}
    // 组件内定义到监视器不能销毁，组件外的监事器可以执行销毁操作
    var unwatch = vm.$watch("wd",function(){
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            method:"get",
            data:{
                wd:vm.wd
            },
            dataType:"jsonp",
            jsonp:"cb"
        }).done((data)=>{
            vm.list = data.s
        });
    },{
        deep:true,
        immediate:true
    });

    setTimeout(()=>{
        unwatch();
    },5000)
</script>
</html>